<template>
  <header class="header">
    <div class="header-left">
      <font-awesome-icon :icon="['fas', 'chevron-left']" size="lg"/>
    </div>
    <div class="header-input">
      <font-awesome-icon :icon="['fas', 'search']"/>
      <span>输入城市/景点/游玩主题</span>
    </div>
    <router-link to="/city">
      <div class="header-right">
        <span class="city-name">{{this.$store.state.city}}</span>
        <font-awesome-icon :icon="['fas','angle-down']"/>
      </div>
    </router-link>
  </header>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl';

  .header
    display: flex;
    height: 0.86rem;
    background-color: $bgColor;
    color: #fff;
    text-align: center;

    .header-left
      width: 0.64rem;
      float: left;
      line-height: 0.86rem;

    .header-input
      flex: 1;
      height: 0.64rem;
      line-height: 0.64rem;
      margin-top: 0.12rem;
      margin-left: 0.2rem;
      padding-left: 0.2rem;
      background: #fff;
      border-radius: 0.1rem;
      color: #ccc;
      text-align: left;

    .header-right
      min-width: 1.04rem;
      padding: 0 0.1rem;
      float: right;
      text-align: center;
      color: #fff;
      line-height: 2.86em;

      .city-name
        margin-right 5px

</style>
